<template>
  <div ref="tableRef" class="l-table-container">
    <a-table
      class="l-table"
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      :scroll="scrollSet"
      :rowClassName="rowClassName"
      bordered
    >
      <template #bodyCell="{ column, record }">
        <slot name="bodyCell" :column="column" :record="record"></slot>
      </template>
    </a-table>
  </div>
</template>

<script setup name="l-table">
import { computed, ref } from "vue";
import { getRowspan } from "/@/utils/tool";

// props
const props = defineProps({
  pagination: {
    type: [Object, Boolean],
    default: false,
  },
  scroll: {
    type: Object,
    default: {
      scrollToFirstRowOnChange: true, // 当分页、排序、筛选变化后是否滚动到表格顶部
      // x: "max-content", // 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 'max-content'
      x: 0, // 设置横向滚动，设置成0就行
      y: "max-content", // 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值，
    },
  },
  dataSource: {
    type: Array,
    default: () => [],
  },
  tableColumns: {
    // mergeColumns: true, //是否合并列  这个是官网里面没有的
    type: Array,
    default: () => [],
  },
  rowClassName: {
    //表格行的类名
    type: Function,
    default: () => {
      return "";
    },
  },
});
const emits = defineEmits(["update:dataSource"]);
const tableRef = ref(null);
// 列表列数据
const columns = computed(() => {
  return props.tableColumns.map((item) => {
    if (item?.mergeColumns && item.mergeColumns) {
      item.customCell = (_, index, column) => {
        return {
          rowSpan: getRowspan(props.dataSource, column.key)[index],
        };
      };
    }
    delete item.mergeColumns; // 移除掉多余的数据
    item.ellipsis = true;
    return item;
  });
});

const scrollSet = computed(() => {
  if (!props.scroll) return false;
  let x = props?.scroll?.x || 0;
  if (props.tableColumns) {
    x = props.tableColumns.reduce((pre, cur) => {
      return pre + (cur?.maxWidth || cur?.width || cur?.minWidth || 0);
    }, 0);
  }
  return {
    scrollToFirstRowOnChange: props?.scroll?.scrollToFirstRowOnChange || false,
    x: x,
    y: props?.scroll?.y || false,
  };
});
// methods
</script>

<style lang="scss" scoped>
.l-table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .l-table {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    border-radius: 0;
    color: var(--table-header-text-color);
    :deep(.ant-spin-nested-loading) {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
      .ant-spin-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
        .ant-table-empty {
          .ant-table-container {
            .ant-table-body {
              & > table {
                flex: 1;
                border-inline-end: 1px solid #f0f0f0;
                border-radius: 0;
              }
              .ant-table-cell {
                padding-top: 10px;
                padding-bottom: 10px;
              }
              .ant-table-placeholder {
                .ant-table-expanded-row-fixed {
                  &::after {
                    display: none;
                  }
                }
              }
            }
          }
        }
        .ant-table {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: auto;
          border-radius: 0;
          .ant-table-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
            border-radius: 0;
            border-start-start-radius: 0;
            border-start-end-radius: 0;
            .ant-table-header {
              border-radius: 0;
              user-select: none;
              & > table {
                border-radius: 0;
              }
              .ant-table-thead {
                border-radius: 0;
                tr {
                  th {
                    color: var(--table-header-text-color);
                    font-size: 12px;
                    font-weight: 400;
                  }
                }
                .ant-table-cell {
                  background-color: #f5f5f5;
                  padding-top: 6px;
                  padding-bottom: 6px;
                  border-radius: 0;
                  border-start-start-radius: 0;
                }
              }
            }
            .ant-table-body {
              flex: 1;
              display: flex;
              flex-direction: column;
              overflow: auto;
              .ant-table-cell {
                padding-top: 10px;
                padding-bottom: 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
